<template>
  <div class="content-div">
    <div class="bread" :class="{ collapse: $store.state.app.isCollapsed === 'true' }">
      列表查询
    </div>
    <div>
      <ul class="list-filter">
        <li>
          <p>记录日期</p>
          <p class="mt5">
            <el-input size="small"></el-input>
          </p>
        </li>
        <li>
          <p>蟹扣编号</p>
          <p class="mt5">
            <el-input size="small"></el-input>
          </p>
        </li>
        <li>
          <p>网箱名称</p>
          <p class="mt5">
            <el-input size="small"></el-input>
          </p>
        </li>
        <li>
          <p style="margin-top: 25px">
            <el-button size="small" type="primary">查询</el-button>
          </p>
        </li>
      </ul>
      <div class="list-wrapper mt10">
        <el-table
          header-row-class-name="table-list-header"
          row-class-name="table-list-row"
          class="mt10" :data="tableData">
          <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
          >
            <template slot-scope="scope" >
              <template v-if="item.prop === 'id' || item.prop === 'box'">
                <el-link @click="goPage(scope.row[item.prop], 'id')" v-if="item.prop === 'id'" type="primary">{{ scope.row[item.prop] }}</el-link>
                <el-link @click="goPage(scope.row[item.prop], 'box')" v-else type="primary">{{ scope.row[item.prop] }}</el-link>
              </template>
              <span v-else>
                {{ scope.row[item.prop] }}
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="txc">
          <el-pagination
            class="mt20"
            layout="prev, pager, next"
            :total="50">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      columns: [
        {
          label: '蟹扣编号',
          prop: 'id'
        },
        {
          label: '蟹型',
          prop: 'type'
        },
        {
          label: '重量',
          prop: 'weight'
        },
        {
          label: '所属网箱',
          prop: 'box'
        },
        {
          label: '投苗日期',
          prop: 'date'
        },
        {
          label: '最后更新日期',
          prop: 'update'
        },
        {
          label: '更新次数',
          prop: 'count'
        }
      ],
      tableData: [
        {
          id: '20201004001',
          type: '公蟹',
          date: '2020-10-04 13:00:00',
          weight: '10两',
          update: '2020-10-14 13:00:05',
          count: '20',
          box: '网箱一号'
        }
      ],
      showEdit: false,
      curRow: {},
      editType: 'new'
    }
  },
  methods: {
    goEdit () {
      this.$router.push('editBox')
    },
    edit (type, data = {}) {
      this.editType = type
      this.curRow = data
      this.showEdit = true
    },
    handleModalClose (info) {
      this.showEdit = false
      if (info.update) {}
    },
    goDetail () {
      this.$router.push('boxDetail')
    },
    goPage (id, type) {
      if (type === 'box') {
        this.$router.push('boxDetail')
      } else {
        this.$router.push('sumInfo')
      }
    }
  }
}
</script>
<style lang="scss">

</style>
